<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="1.5" >
          <el-button
              type="primary"
              size="mini"
              @click="add()"
            >新增</el-button>
        </el-col>
        <el-col :span="1.5" >
          <el-button
              type="danger"
              size="mini"
            >删除</el-button>
        </el-col>
        <el-col :span="1.5" >
          <el-input placeholder="平时分占比" v-model="RegularProportion">
            <template slot="prepend">平时分占比:</template>
            <template slot="append">%</template>
          </el-input>
        </el-col>
          <el-col :span="1.5" >
            <el-input placeholder="期末分占比" v-model="FinalexamProportion">
              <template slot="prepend">期末分占比:</template>
              <template slot="append">%</template>
            </el-input>
        </el-col>
      </el-row>


    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="学生学号" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.student.userId }}
          </template>
        </el-table-column>

        <el-table-column label="学生姓名" width="110" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.student.username}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属专业" width="200" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.student.major.majorName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平时分" width="100" align="center">
          <template slot-scope="scope" >
            <el-input v-model="scope.row.Regulargrade" placeholder="平时分"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="期末考试分" width="130" align="center">
          <template slot-scope="scope" >
            <el-input v-model="scope.row.Finalexamgrade" placeholder="期末考试分"></el-input>
          </template>
        </el-table-column>
         <el-table-column label="预计分数" width="130" align="center" v-model="testGrade">
            <template slot-scope="scope" >
              <span >{{scope.row.testGrade}}</span>
            </template>
        </el-table-column>

        <el-table-column label="课程分数" width="200" align="center">
          <template slot-scope="scope" >
            <span >{{scope.row.grade}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button @click="score(scope.row)">评分</el-button>
          </template>
        </el-table-column>
      </el-table>
    
    <el-pagination @size-change= "handleSizeChange" @current-change= "handleCurrentChange" :current-page= "PageSet.pageNum"
        :page-sizes="[10, 30, 50, 100]" :page-size="PageSet.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="PageSet.total">
    </el-pagination>



  </div>
</template>

<script>
import { getStudentInfo, scoringStudent} from '@/api/teacher/'

export default {

  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      RegularProportion: '',
      FinalexamProportion: '',
      list: null,
      listLoading: true,
      scoreParam: {
        csId: null,
        grade: null,
      },
      PageSet: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的行数
        total: 100
      },
    }
  },
  created() {
    this.fetchData()
  },
  watch: {
    list: {
      handler: function(val){
        val.forEach(item => {
          item.testGrade = parseFloat(item.Regulargrade)*this.RegularProportion*0.01 + parseFloat(item.Finalexamgrade) * this.FinalexamProportion*0.01;
        });
      },
      deep: true,
    }
},

  methods: {
    handleSizeChange: function(size) {
      this.PageSet.pageSize = size
      this.fetchData()
    },
    handleCurrentChange: function(pageNum) {
      this.PageSet.pageNum = pageNum
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getStudentInfo(this.PageSet, this.$route.params.ctId).then(response => {
        this.PageSet.total = response.data.items.total
        this.list = response.data.items.list
        this.listLoading = false
      })
    },
    score(row) {
      this.scoreParam.csId = row.csId
      this.scoreParam.grade = row.testGrade
      scoringStudent(this.scoreParam).then(response => {
        this.$message({
          message: '添加成功',
          type: 'success'
        })
      }).then(response => {
        this.fetchData()
      })
   }
  }
}
</script>
